<template>
  <div class="tool-use-tags">
    <h2 class="bar-title mb-8 break-words text-center">
      <span class="text-gray-1000 text-26 font-semibold break-words w-full">{{$t('detail_tags',{toolName: $websiteName(tool)})}}</span>
    </h2>
    <div class="flex items-stretch flex-wrap gap-x-5 gap-y-4">
      <common-link path="/tag/:handle"
        v-for="(item, key) in tags"
        :params='{handle: item }'
        :key="`tags-${key}`"
        class="case-item bg-purple-1900 flex-shrink-0 max-w-full flex items-center justify-center px-4 py-2 hover:opacity-90 rounded">
        <span class="flex flex-1 text-lg text-purple-2000">
          {{item}}
        </span>
        <svg-icon className="text-purple-2000 text-sm ml-5"
          iconName='arrow_right'></svg-icon>
      </common-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ToolDetailTags',
  props: {
    tool: {
      type: Object,
      default: function () {
        return {}
      },
    },
    tags: {
      type: Array,
      default: () => [],
    },
  },
}
</script>
<style lang='scss' scoped>
.tool-use-tags {
  .case-item {
    font-size: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    i {
      width: 15px;
      height: 100%;
      background: #fff url('../assets/images/triangle.png');
      background-size: 100% 100%;
    }
  }
}
</style>